<template>
  <q-drawer
    :title="selectionName"
    :visible.sync="drawerVisible"
    :modal="false"
    size="260"
    :before-close="handleClose"
    class="setter-panel"
  >
    <!-- <div class="setter-panel"> -->
    <div v-if="activeNode" :key="selectionName">
      <div
        v-for="(tab, index) in activeNode.componentMeta.configure"
        :key="index"
        :label="tab.title"
      >
        <div class="setter-panel-title">{{ tab.title }}</div>
        <q-form ref="formRef" :model="form" :rules="formRules">
          <div v-for="(item, i) in tab.override" :key="i">
            <template v-if="isShow(item.name)">
              <q-form-item
                :label="getLabel(item)"
                :label-width="getLabelWidth(item)"
                :label-position="getLabelPosition(item)"
                :prop="item.name"
              >
                <component
                  :is="getSetter(item.setter)"
                  :value="getValue(item.name)"
                  :on-change="getChange(item)"
                  v-bind="getProps(item.setter)"
                />
              </q-form-item>
            </template>
          </div>
        </q-form>
      </div>
    </div>
    <!-- </div> -->

    <!-- <span slot="footer" class="dialog-footer"> -->
    <!-- <q-button type="primary" @click="handleSave()">提交</q-button> -->
    <!-- <q-button @click="handleClose">取消</q-button> -->
    <!-- </span> -->
  </q-drawer>
</template>

<script>
export default {
  name: 'SetterPanel',
};
</script>

<script setup>
import { get, cloneDeep } from 'lodash';
import { useDocument, useWorkbench } from '@/designer/hooks';
import { ref, computed, getCurrentInstance } from '@vue/composition-api';

const { proxy } = getCurrentInstance();
const document = useDocument();
const selection = document.value.selection;
const workbench = useWorkbench();

watch(
  () => selection.value,
  () => {
    console.log(selection.value, 'selection.value');
    nextTick(() => {
      workbench.value.settersFormInstance = proxy.$refs.formRef[0];
    });
    return;
  }
);

const activeNode = computed(() => {
  return document.value.activeNode.value;
});

const drawerVisible = computed(() => {
  return !!selection.value;
});

const selectionName = computed(() => {
  const selectionType = selection.value?.type;
  return (
    (selectionType === 'screen' ? '大屏配置' : '组件属性配置') +
    `(${selectionType})`
  );
});

const form = ref({});
const formRules = computed(() => {
  return selection.value?.generateValidateRules();
});

const getValue = (name) => {
  return activeNode.value.props[name];
};

const getLabel = (setting) => {
  const name = setting.name;
  const obj = activeNode.value.componentMeta.props.find(
    (item) => item.name === name
  );

  return obj?.desc || '';
};

// 联动显隐
const isShow = (name) => {
  const obj = activeNode.value.componentMeta.props.find(
    (item) => item.name === name
  );

  return obj?.visible !== false;
};

const getLabelWidth = (setting) => {
  const defaultLabelWidth = '80px';

  const props = getProps(setting.setter);
  return props.labelWidth || defaultLabelWidth;
};

const getLabelPosition = (setting) => {
  const props = getProps(setting.setter);
  return props.position || 'left';
};

const getOnBeforeChange = (setting) => {
  return get(setting, 'setter.props.onBeforeChange', (value) => value);
};

const getChange = (setting) => {
  const name = setting.name;
  const onBeforeChange = getOnBeforeChange(setting);

  return (value) => {
    selection.value.props[name] = onBeforeChange(value, selection);
  };
};

const getSetter = (setter) => {
  return typeof setter === 'string' ? setter : get(setter, 'componentName');
};

const getProps = (setter) => {
  if (typeof setter === 'string') {
    return {};
  }

  const props = get(setter, 'props', {});

  for (const key in props) {
    if (props[key] instanceof Promise) {
      props[key].then((value) => {
        props[key] = value;
      });
    }
  }

  return props;
};

const handleClose = () => {
  selection.value = null;
};

const handleSave = () => {
  const { validateStatus, errorNode } = document.value.validateNodes(
    selection.value
  );
  if (!validateStatus) {
    workbench.value.validateSettersForm();
    console.log(errorNode, 'errorNode');
    // proxy.$message.error(`【${errorNode.componentName}】有必填项为空！`);
    return;
  }
  handleClose();
};
</script>
<style lang="scss" scoped>
.setter-panel {
  .setter-panel-name {
    font-size: 14px;
    margin-bottom: 12px;
    height: 40px;
    line-height: 40px;
    background: #ececec;
    border-bottom: solid 1px #dcdcdc;
    padding-left: 4px;
  }
  .setter-panel-title {
    font-size: 14px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: solid 1px #f5f5f5;
    color: #000;
  }
}
.q-drawer__wrapper {
  right: 24px;
  top: 70px;
  bottom: 24px;
  width: 364px;
  ::v-deep .q-drawer {
    box-shadow: 0 4px 8px 0 #99999933;
  }
}
</style>
